<template>
  <div id="system-home">
    <div class="system-header">
      <div class="rf">
        <p class="tit">系统管理</p>
      </div>
      <div class="rg">
        <p class="lf goback" @click="goback">返回</p>
        <p class="lf logout" @click="logout">退出</p>
      </div>
    </div>
    <div class="system-body">
      <div class="lf system-menu" :style="{ height: height }">
        <el-menu class="el-menu-vertical-demo" :default-active="currentPath" :router="true">
          <el-menu-item v-for="item in menuList" :key="item.key" :index="item.key">
            <span slot="title">{{ item.value }}</span>
          </el-menu-item>
        </el-menu>
      </div>
      <div class="system-body" :style="{ height: height }">
        <router-view/>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import { nextPage } from '../../../assets/js/index'
  import ajax from '../../../api/ajax/ajax'
  import api from '../../../api/url'

  export default {
    name: 'system-home',
    data () {
      return {
        menuList: [],
        height: '',
        currentPath: ''
      }
    },
    methods: {
      // 返回系统列表
      goback () {
        nextPage('/systemList')
      },
      // 获取系统管理菜单列表
      getSysMenuList () {
        ajax.post(api.GETMENU, {sys_no: 'M200'}).then(res => {
          if (res.data[0].children) {
            res.data[0].children.map(item => {
              let value = item.obj.name
              let key = item.obj.url
              let Obj = {
                key: key,
                value: value
              }
              this.menuList.push(Obj)
            })
          }
          let tempArr = []
          tempArr = this.menuList[0]
          this.menuList.forEach((item, index) => {
            if (item.key === '/systemHome/orgManager') {
              this.menuList[0] = this.menuList[index]
              this.menuList[index] = tempArr
            }
          })
        })
      },
      // 退出
      logout () {
        ajax.post(api.LOGOUT).then(res => {
          this.$confirm('将退出登录是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$message({
              type: 'success',
              message: '退出成功!'
            })
            setTimeout(() => {
              window.location.href = '/'
            }, 500)
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消退出'
            })
          })
        })
      }
    },
    created () {
      this.height = (window.innerHeight - 50) + 'px'
      this.currentPath = this.$route.path
      window.onresize = () => {
        this.height = window.innerHeight - 50 + 'px'
      }
      this.getSysMenuList()
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  #system-home
    .system-header
      height 50px
      line-height 50px
      background #262626
      padding 0 15px
      .tit
        color #ddd
        font-size 24px
      .rf
        float left
      .rg
        float right
        p.lf
          font-size 14px
          padding 0 10px
          cursor pointer
          color #bbb
    .system-body
      height 100%
      overflow hidden
      background #F5F7FA
      .system-menu
        width 200px
        background #333
        .el-menu
          border 1px solid transparent
          background-color #333 !important
          .el-menu-item
            height 36px
            line-height 36px
            color #bbb
            &:hover
              background #4c4c4c
            &:active
              background #4c4c4c
          .is-active
            color #016dfb
            background #333
            &:hover
              color #fff
</style>
